<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>React.forwardRef</title>
</head>

<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		/**
		 * 我们通过调用 React.createRef 创建了一个 React ref 并将其赋值给 ref 变量。
			我们通过指定 ref 为 JSX 属性，将其向下传递给 <FancyButton ref={ref}>。
			React 传递 ref 给 forwardRef 内函数 (props, ref) => ...，作为其第二个参数。
			我们向下转发该 ref 参数到 <button ref={ref}>，将其指定为 JSX 属性。
			当 ref 挂载完成，ref.current 将指向 <button> DOM 节点。
		*/
		function logProps(Component) {
			class LogProps extends React.Component {
				componentDidUpdate(prevProps) {
					console.log('old props:', prevProps);
					console.log('new props:', this.props);
				}

				render() {
					const { forwardedRef, ...rest } = this.props;

					// 将自定义的 prop 属性 “forwardedRef” 定义为 ref
					return <Component ref={forwardedRef} {...rest} />;
				}
			}

			// 注意 React.forwardRef 回调的第二个参数 “ref”。
			// 我们可以将其作为常规 prop 属性传递给 LogProps，例如 “forwardedRef”
			// 然后它就可以被挂载到被 LogProps 包裹的子组件上。
			return React.forwardRef((props, ref) => {
				return <LogProps {...props} forwardedRef={ref} />;
			});
		}
		//渲染组件到页面
		ReactDOM.render(<logProps />, document.getElementById('test'))
	</script>
</body>

</html>